<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tfView</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
    <style>
        .dd-demo{
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="dd1" class="dd-demo" style="background-color: gold"></div>
    <div id="dd2" class="dd-demo" style="background-color: red"></div>
    <div id="dd4" class="dd-demo" style="background-color: #499B33"></div>
    <div id="dd3" class="dd-demo" style="background-color: yellowgreen"></div>
</body>
<script>
    //默认让div可以拖动
    $('#dd1').draggable();
    //通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动
    $('#dd2').draggable({
        proxy:'clone'
    });
    $('#dd4').draggable({
        revert:true,
        proxy:'clone'
    });
    //通过创建自定义代理（proxy）让其可以拖动。
    $('#dd3').draggable({
        proxy:function(source){
            var p = $('<div class="proxy" style="background-color: grey">proxy</div>');
            p.appendTo('body');
            return p;
        }
    });
</script>
</html>